<template>
  <div class="container">{{msg}}</div>
</template>

<script>
import { Tag, Col, Icon, Cell } from 'vant'

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell
  },
  name: 'Test',
  data () {
    return {
      msg: 'testdata'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.home-recommend {
  padding-bottom: 50px;
}

.navigation {
  font-size: 0.5rem;
  background: #fff;
  .flexbox-item {
    padding: 12px 0;
    img {
      width: 50%;
    }
    label {
      display: block;
      font-size: 10px;
      color: #8d8d8d;
      font-weight: 300;
    }
  }
}

.broadcast {
  img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
.van-swipe-item /deep/ {
  position: relative;
  height: 185px !important;
}

.van-cell-notice /deep/ .van-cell__title img {
  height: 14px;
  vertical-align: middle;
}
.van-cell-notice /deep/ .van-cell__title span {
  vertical-align: middle;
  position: relative;
  margin-left: 10px;
  padding-left: 10px;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.van-cell-notice /deep/ .van-cell__title span::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  content: "";
  border-left: 1px solid #d7d7d7;
}
</style>
